<template>
  <div>
    <div id="bar4"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: "",
      province: [],
      usercount: []
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart()
    this.fetchList()
    // setInterval(this.fetchList,10000)
  },
  methods: {
    async fetchList() {
      console.log("获取数据中")
      const response = await this.$http.get("alerts/provinceUserCounts")
      if (response.status == 200) {
        const data = response.data;
        this.province = data.map(item => item.province)
        this.usercount = data.map(item => item.userCount)
        this.updateChartData()
      }
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("bar4"));
      var colorList = {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#06DBF5" // 0% 处的颜色
          },
          {
            offset: 1,
            color: "#00d386" // 100% 处的颜色
          }
        ],
        globalCoord: false // 缺省为 false
      };
      this.chart.setOption({
        title: {
          text: "用户来源",
          left: "center",
          textStyle: {
            color: 'white',
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: [],
          // axisTick: {
          //     alignWithLabel: true
          // }
          axisLine: {
            lineStyle: {
              color: "black"
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 0,
            textStyle: {
              fontFamily: "Microsoft YaHei"
            },
            color: "white"
          }
        },

        yAxis: {
          type: "value",
          axisLine: {
            // show: false,
            lineStyle: {
              color: "black"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)"
            }
          },
          axisLabel: {
            color: "red"
          }
        },

        series: [
          {
            name: "",
            type: "bar",
            barWidth: "40%",
            // label:{
            //     normal:{
            //         show:true,
            //         formatter: function(v) {
            //             var val = v.data;
            //             if (val === 0) {
            //                 return '';
            //             }
            //             return val;
            //         },
            //         color: '#fff'
            //     }
            // },
            itemStyle: {
              color: function (params) {
                // if (params.name == '建许路口') {
                //     return specialColor;
                // } else {
                //     return colorList;
                // }
                return colorList;
              }
              //barBorderRadius: 15,
            },
            emphasis: {
              itemStyle: {
                color: "#FBB419"
              }
            },
            data: []
          }
        ]
      });
    },
    updateChartData() {
      this.chart.setOption({
        xAxis: {
          data: this.province
        },
        series: [{
          data: this.usercount
        }]
      })
    }
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = "";
    // console.log('------------------销毁阶段------------------')
    // console.log(this.chart);
    // 仍可以使用data与method方法
    //   console.log(`这是beforeDestroy的执行:${this.name}`)
  }
};
</script>

<style lang="scss" scoped>
#bar4 {
  width: 100%;
  height: 40vh;
  // background-color: #554444;
}
</style>